<template>
  <div class="app">
    <el-card class="card">
      <el-button type="primary" @click="xzquanx">添加权限</el-button>
    </el-card>

    <el-table border :data="list" row-key="id">
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="code" label="标识" align="center" />
      <el-table-column prop="description" label="描述" align="center" />
      <el-table-column label="操作" align="center">
        <template v-slot="{row}">

          <div> {{ row }}</div>
          <!-- 在子集是没有添加按妞的，所以用v-if判断type值是否为2(为二等于子集)隐藏按钮 -->
          <el-button v-if="row.type===1" type="text" @click="xzquanx2(row.id)">添加</el-button>
          <el-button type="text" @click="bianji(row)">编辑</el-button>
          <el-button type="text" @click="del(row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <tck ref="tck" @getData="getData()" />
  </div>
</template>
<!--
     查询
      1.定义导入api
      2.调用返回存储数据，渲染
      3.有分页做分页抽离
        页码，页容量(.sync)在data中绑定
        总数渲染
        页码，页容量更改后重新渲染数据

      增
       1.创建新政弹出框
       2.导入注册
       3.点击打开弹出框
       4.完成弹出框内容
       5.完成表单认证
       6.定义接口导入
       7.调用成功
          a.提示
          b.关闭弹出框
          c.刷新数据
          d.清空表单

      修改
        1.打开弹出框
        2.数据回显
             a当前可以拿到数据，做深拷贝
             b发送请求
        3.在新增弹出框中添加一个标识区分（mode）
        4.新政和编辑打开弹出框修改该变量为相应值
        5.调整标题
        6.有需要修改表单验证则修改
        7.定义接口
        8.调用接口
             a.提示
             b.刷新数据
             c.关闭弹出框
             d.清空表单

      删除
        1.点击打开确认框
        2.定义接口api
        3.成功调用
             a.提示
             b.刷新数据
             d.有分页抽离分页（当前页码大于1，当前页数据大于1 减一）

-->

<script>
import { syspermission, syspermissioniddel } from '@/api/quanxian'
export default {
  components: {
    tck: () => import('./components/tck.vue')
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 删除权限节点
    async del(id) {
      await this.$confirm('确认删除吗')
      await syspermissioniddel(id)
      this.$message.success('删除成功')
      this.getData()
    },
    // 编辑弹出框
    bianji(row) {
      this.$refs.tck.show = true
      this.$refs.tck.mode = 'bian'
      this.$refs.tck.form = JSON.parse(JSON.stringify(row))
    },
    // 子集新增
    xzquanx2(pid) {
      this.$refs.tck.show = true
      this.$refs.tck.form.pid = pid
      this.$refs.tck.form.type = 2
      this.$refs.tck.mode = 'add'
    },
    // 新增
    async xzquanx() {
      this.$refs.tck.show = true
      this.$refs.tck.form.pid = '0'
      this.$refs.tck.form.type = 1
      this.$refs.tck.mode = 'add'
    },
    async getData() {
      const res = await syspermission()
      console.log(res)

      this.list = this.xxxx(res.data.data)
    },
    /*
       1.找出第一层
       2.利用pid传参找出所有子集
       3.找出每一层，添加children
       4.利用递归函数找出相对于的子集(子集pid等于父级id)
    */
    xxxx(arr, pid = '0') {
      return arr.filter(v => {
        if (v.pid === pid) {
          v.children = this.xxxx(arr, v.id)
          return true
        }
      })
    }

  }

}
</script>

<style scoped lang="scss">
.app{
  padding: 20px;
  .card{
  text-align: right;

  margin-bottom: 20px;
  }
}

</style>
